<script setup>
import * as THREE from 'three';
// import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// 导入轨道模型控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { onMounted, ref } from 'vue';

let scene = null;
let camera = null;
let renderer = null;
let orbitControls = null;
const container = ref(null);

onMounted(() => {
  initThree();
  loadModel('shiba/scene.gltf');
  initControls();
  // loadModel('sorceress.glb');
});

const initControls = () => {
  orbitControls = new OrbitControls(camera, renderer.domElement);
  // 惯性

  orbitControls.enableDamping = true;

  // 动态阻尼系数

  orbitControls.dampingFactor = 0.25;

  // 缩放

  orbitControls.enableZoom = true;

  // 右键拖拽

  orbitControls.enablePan = true;

  // 水平旋转范围

  orbitControls.maxAzimuthAngle = Math.PI / 6;

  orbitControls.minAzimuthAngle = -Math.PI / 6;

  // 垂直旋转范围

  orbitControls.maxPolarAngle = Math.PI / 6;

  orbitControls.minPolarAngle = -Math.PI / 6;
};

const initThree = () => {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.set(0, 0, 1.5);
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth / 2, window.innerHeight / 2);
  container.value.appendChild(renderer.domElement);
};
const loadModel = (modelPath) => {
  const loader = new GLTFLoader();
  loader.load(
    modelPath,
    (gltf) => {
      scene.add(gltf.scene);
      renderer.render(scene, camera);
    },
    undefined,
    (error) => {
      console.log(error);
    }
  );
};
const animate = () => {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};
</script>

<template>
  <div id="three" ref="container"></div>
</template>

<style scoped>
#three {
  width: 100%;
  height: 100%;
  background-color: bisque;
}
</style>
